<template>
  <view>
    <!-- 排序条件选择器 -->
    <u-picker
        :show="listSortPicker.show"
        :columns="listSortPicker.options"
        @confirm="listSortPicker.confirm"
        @close="listSortPicker.close"
        @cancel="listSortPicker.close"
        title="选择某属性点击确定即可"
        :closeOnClickOverlay=true
        keyName="label"
    >
    </u-picker>

    <!-- 提交搜索弹窗 -->
    <u-popup
        :show="condition.show"
        :round="10"
        mode="bottom"
        :direction=0
        :closeable=true
        @close="condition.close()"
    >
      <view>
        <view style="text-align: center;margin: 10px 0 20px 0 ">
          <text style="font-size: 34rpx;font-weight: bold">
            填充筛选条件(不填的条件不参与判断)
          </text>
        </view>
        <view style="margin: 10px 10px">
          <u--form labelPosition="left" labelWidth="auto">

            <u-form-item label="报名时间范围:">
              <view style="z-index:10000">
                <uni-datetime-picker
                    hide-second="true"
                    type="datetimerange"
                    v-model="condition.data.createTime.value"
                    @change="condition.data.createTime.change"
                    rangeSeparator="至"/>
              </view>
            </u-form-item>

            <view>
              <u-row gutter="1">
                <u-col :span="6">
                  <u-button type="success" text="清空" @click="condition.def()"></u-button>
                </u-col>
                <u-col :span="6">
                  <u-button type="primary" text="搜索" @click="condition.search()"></u-button>
                </u-col>
              </u-row>
            </view>
          </u--form>
        </view>
      </view>
    </u-popup>


    <!-- 按钮 -->
    <view style="margin: 20rpx 0 0 20rpx">
      <view style="display: inline-block;margin-right: 10rpx">
        <u-button shape="circle" size="medium" @click="condition.open()">
          <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
            条件搜索
          </text>
        </u-button>
      </view>

      <view style="display: inline-block;margin-right: 10rpx">
        <u-button shape="circle" size="medium" @click="listSortPicker.open()">
          <text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
            表格排序
          </text>
        </u-button>
      </view>
    </view>

    <!--  报名记录详情  -->
    <u-modal
        :show="modal.byDetails.show"
        :title="modal.byDetails.title"
        :closeOnClickOverlay=true
        :showConfirmButton=false
        @close="modal.byDetails.close()"
    >
      <view>
        <u--form labelPosition="left" labelWidth="auto">

          <u-form-item
              label="记录 ID : "
              @click="service.copyText(modal.byDetails.data.recordId,'记录ID')"
              v-if="!service.check.isNull(modal.byDetails.data.recordId)"
          >
            <text>{{ modal.byDetails.data.recordId }}</text>
          </u-form-item>

          <u-form-item
              label="订单编号: "
              @click="service.copyText(modal.byDetails.data.orderNum,'订单编号')"
              v-if="!service.check.isNull(modal.byDetails.data.orderNum)"
          >
            <text>{{ modal.byDetails.data.orderNum }}</text>
          </u-form-item>

          <u-form-item
              label="昵称 : "
              @click="service.copyText(modal.byDetails.data.nick,'昵称')"
              v-if="!service.check.isNull(modal.byDetails.data.nick)"
          >
            <text style="color: #5352ed">{{ modal.byDetails.data.nick }}</text>
          </u-form-item>

          <u-form-item
              label="头像 : "
              v-if="!service.check.isNull(modal.byDetails.data.avatar)"
          >
            <view
                @click="service.previewImg([modal.byDetails.data.avatar])"
            >
              <u--image
                  shape="circle"
                  :lazy-load="true"
                  :width="35"
                  :height="35"
                  :src=modal.byDetails.data.avatar
              >
                <view slot="error" style="font-size: 24rpx;">加载失败</view>
              </u--image>
            </view>
          </u-form-item>

          <u-form-item
              label="报名时间 : "
              v-if="!service.check.isNull(modal.byDetails.data.registrationTime)"
          >
            <text>{{ service.style.time(modal.byDetails.data.registrationTime, 6) }}</text>
          </u-form-item>

          <u-form-item
              label="报名状态 : "
              v-if="!service.check.isNull(modal.byDetails.data.registerStatus)"
          >
            <rich-text :nodes="style.status(modal.byDetails.data.registerStatus)"></rich-text>
          </u-form-item>

          <u-form-item
              label="活动 ID : "
              @click="service.copyText(modal.byDetails.data.activityId,'活动ID')"
              v-if="!service.check.isNull(modal.byDetails.data.activityId)"
          >
            <text style="color: #70a1ff">{{ modal.byDetails.data.activityId }}</text>
          </u-form-item>

          <u-form-item
              label="活动标题 : "
              @click="service.copyText(modal.byDetails.data.activityTitle,'活动标题')"
              v-if="!service.check.isNull(modal.byDetails.data.activityTitle)"
          >
            <text style="color: #2ed573">{{ modal.byDetails.data.activityTitle }}</text>
          </u-form-item>

          <u-form-item
              label="报名费用 : "
              v-if="!service.check.isNull(modal.byDetails.data.cost)"
          >
            <text style="color: #ffa502">{{ modal.byDetails.data.cost }} 元</text>
          </u-form-item>

          <u-form-item
              label="开启时间 : "
              v-if="!service.check.isNull(modal.byDetails.data.openTime)"
          >
            <text>{{ service.style.time(modal.byDetails.data.openTime, 6) }}</text>
          </u-form-item>
          <u-form-item
              label="结束时间 : "
              v-if="!service.check.isNull(modal.byDetails.data.overTime)"
          >
            <text>{{ service.style.time(modal.byDetails.data.overTime, 6) }}</text>
          </u-form-item>
        </u--form>
        <view style="margin-top: 5px">
          <u--text
              type="success"
              text="部分字段可以点击复制噢~"
          />
        </view>
      </view>
    </u-modal>

    <!--  确认签到对话窗  -->
    <u-modal
        :show="modal.byConfirmSignIn.show"
        :title="modal.byConfirmSignIn.title"
        :closeOnClickOverlay=true
        :showCancelButton=true
        @confirm="modal.byConfirmSignIn.confirm()"
        @cancel="modal.byConfirmSignIn.close()"
        @close="modal.byConfirmSignIn.close()"
    >
      <view>
        <text>确认用户</text>
        <text style="margin: 0 5px;color: #ff4757;font-size: 30rpx;font-weight: bold">
          {{ modal.byConfirmSignIn.data.nick }}
        </text>
        <text>已经参与</text>
        <text style="margin: 0 5px;color: #ff6348;font-size: 30rpx;font-weight: bold">
          {{ modal.byConfirmSignIn.data.activityTitle }}
        </text>
      </view>
    </u-modal>

    <view
        style="margin: 20rpx 30rpx"
    >
      <uni-table
          border
          stripe
          :loading="table.loading"
          emptyText="没有检索到合适的数据噢."
      >
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="center">
            <text class="table-th-font">记录ID</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">订单编号</text>
          </uni-th>
          <uni-th align="center" width="38">
            <text class="table-th-font">头像</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">微信昵称</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">状态</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">报名时间</text>
          </uni-th>
          <uni-th align="center">
            <text class="table-th-font">活动标题</text>
          </uni-th>
          <uni-th align="center" width="200">
            <text class="table-th-font">操作</text>
          </uni-th>
        </uni-tr>

        <uni-tr v-for="(item,index) in table.data " :key="index">
          <uni-td align="center">
            <text class="tb_td_font" style="font-weight: bold">
              {{ item.id }}
            </text>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font" style="font-weight: bold">
              {{ service.html.isNullToStr(item.orderNum) }}
            </text>
          </uni-td>

          <uni-td align="center">
            <view
                @click="service.previewImg([item.avatar])"
            >
              <u--image
                  shape="circle"
                  :lazy-load="true"
                  :width="35"
                  :height="35"
                  :src=item.avatar
              >
                <view slot="error" style="font-size: 24rpx;">加载失败</view>
              </u--image>
            </view>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font">
              {{ item.nick }}
            </text>
          </uni-td>

          <uni-td align="center">
            <rich-text
                class="tb_td_font"
                :nodes="style.status(item.status)"
            >
            </rich-text>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font">
              {{ service.style.time(item.createTime, 6) }}
            </text>
          </uni-td>

          <uni-td align="center">
            <text class="tb_td_font" id="text-flow">
              {{ item.activityTitle }}
            </text>
          </uni-td>

          <uni-td align="center">
            <view
                class="operation-btn"
            >
              <u-button
                  size="small"
                  type="success"
                  text="详情"
                  @click="modal.byDetails.open(item.id)"
              >
              </u-button>
            </view>
            <view
                v-if="item.status !== 2 && item.status !== -1"
                class="operation-btn"
            >
              <u-button
                  size="small"
                  type="primary"
                  text="确认签到"
                  @click="modal.byConfirmSignIn.open(item)"
              >
              </u-button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <!-- 分页 -->
    <view
        style="text-align: center"
    >
      <view style="display: inline-block;margin: 0 8rpx">
        <page-pagination
            :total="table.total"
            :pageSize="table.pageSize"
            :showAround="true"
            :btnText="true"
            :forceEllipses="true"
            @change="table.setPageNo">
        </page-pagination>
      </view>
    </view>
    <!--自己封装的提示器-->
    <popup ref="popup" />
  </view>
</template>

<script>
import service from "@/utils/service";
import popup from "@/merchant/my/my-popup"

export default {
  components: {popup},
  data() {
    let _vm = this;
    return {
      service: service,
      table: {
        loading: true,
        total: 0,
        pageSize: 10,
        pageNo: 1,
        data: [],
        setPageNo(v) {
          _vm.table.pageNo = v
          _vm.getList();
        },
      },
      /* 表格排序选择器 */
      listSortPicker: {
        show: false,
        // 排序字段
        sortKey: null,
        // 排序规则 1 正序 -1 倒序
        sort: -1,
        options: [
          [
            {label: '默认', key: null},
          ],
          [
            {label: '从小到大', value: 1},
            {label: '从大到小', value: -1},
          ],
        ],
        // 确认回调
        confirm(v) {
          let me = _vm.listSortPicker;
          console.log("表格排序选项结果 : ", v)
          me.show = false;
          // 默认
          if (v.value[0].key === null) {
            me.sortKey = null
          } else {
            me.sortKey = v.value[0].key;
          }
          me.sort = v.value[1].value;
          this.getList();
        },
        close() {
          _vm.listSortPicker.show = false;
        },
        open() {
          _vm.listSortPicker.show = true;
        }
      },
      /* 条件筛选对象 */
      condition: {
        show: false,
        open() {
          _vm.condition.show = true;
        },
        close() {
          _vm.condition.show = false;
        },
        data: {
          /* 创建时间范围 */
          createTime: {
            value: [],
            change(e) {
              console.log("选中创建时间 : ", e)
            }
          }
        },
        def() {
          _vm.condition.data.createTime.value = []
          _vm.condition.search();
        },
        search() {
          console.log("点击搜索 条件 : ", _vm.condition.data)
          _vm.condition.close();
          _vm.getList();
        }
      },
      /* 加载对象 */
      loading: {
        // 进度
        plan: 0,
        // 阈值
        threshold: 0,

        step() {
          if (++this.plan >= this.threshold) {
            try {

            } finally {
              uni.hideLoading();
            }
          }
        }
      },
      /* 模态窗对象 */
      modal: {
        // 报名记录详情
        byDetails: {
          show: false,
          title: '报名记录详情',
          data: {
            /* 记录 ID */
            recordId: '',
            /* 订单编号 */
            orderNum: '',
            /* 昵称 */
            nick: '',
            /* 头像 */
            avatar: '',
            /* 报名时间 */
            registrationTime: '',
            /* 报名状态 */
            registerStatus: '',
            /* 活动 ID */
            activityId: '',
            /* 活动标题 */
            activityTitle: '',
            /* 报名费用 */
            cost: '',
            /* 活动开启时间 */
            openTime: '',
            /* 活动结束时间 */
            overTime: '',
          },
          def() {
            _vm.modal.byDetails.data = {
              recordId: '',
              orderNum: '',
              nick: '',
              avatar: '',
              registrationTime: '',
              registerStatus: '',
              activityId: '',
              activityTitle: '',
              cost: '',
              openTime: '',
              overTime: '',
            }
          },
          async open(id) {
            _vm.modal.byDetails.def();
            let res = await _vm.getDetail(id);
            if (res.code !== 0) {
              _vm.modal.byDetails.close();
              _vm.$refs.popup.error("获取详情失败 : " + res.result);
            } else {
              let errorFields = [];
              service.executeTask(function () {
                _vm.modal.byDetails.data.recordId = res.result.recordId;
              }, errorFields, "记录ID")
              service.executeTask(function () {
                _vm.modal.byDetails.data.orderNum = res.result.orderNum;
              }, errorFields, "订单编号")
              service.executeTask(function () {
                _vm.modal.byDetails.data.nick = res.result.nick;
              }, errorFields, "昵称")
              service.executeTask(function () {
                _vm.modal.byDetails.data.avatar = res.result.avatar;
              }, errorFields, "头像")
              service.executeTask(function () {
                _vm.modal.byDetails.data.registrationTime = res.result.registrationTime;
              }, errorFields, "报名时间")
              service.executeTask(function () {
                _vm.modal.byDetails.data.registerStatus = res.result.registerStatus;
              }, errorFields, "报名状态")
              service.executeTask(function () {
                _vm.modal.byDetails.data.activityId = res.result.activityId;
              }, errorFields, "活动ID")
              service.executeTask(function () {
                _vm.modal.byDetails.data.activityTitle = res.result.activityTitle;
              }, errorFields, "活动标题")
              service.executeTask(function () {
                _vm.modal.byDetails.data.cost = res.result.cost;
              })
              service.executeTask(function () {
                _vm.modal.byDetails.data.openTime = res.result.openTime;
              }, errorFields, "开启时间")
              service.executeTask(function () {
                _vm.modal.byDetails.data.overTime = res.result.overTime;
              }, errorFields, "结束时间")
              if (errorFields.length !== 0) {
                uni.showToast({
                  title: '丢失参数 : [ ' + errorFields.toString() + " ] ",
                  duration: 2500,
                  icon: "none"
                })
              }
            }
            _vm.modal.byDetails.show = true
          },
          close() {
            _vm.modal.byDetails.show = false
          }
        },
        // 确认签到
        byConfirmSignIn: {
          show: false,
          title: '确认用户签到',
          data: {
            /* 记录 ID */
            recodeId: '',
            /* 订单编号 */
            orderNum: '',
            /* 昵称 */
            nick: '',
            /* 活动标题 */
            activityTitle: '',
          },
          def(recordId = '', orderNum = '', nick = '', activityTitle = '') {
            _vm.modal.byConfirmSignIn.data.recodeId = recordId;
            _vm.modal.byConfirmSignIn.data.orderNum = orderNum;
            _vm.modal.byConfirmSignIn.data.nick = nick;
            _vm.modal.byConfirmSignIn.data.activityTitle = activityTitle;
          },
          confirm(){
            console.log(_vm.modal.byConfirmSignIn.data)
            if(service.check.isNull(_vm.modal.byConfirmSignIn.data.recodeId)){
              uni.showToast({title: '记录编号丢失,不能发起请求',icon: 'none'})
              return;
            }
            if(service.check.isNull(_vm.modal.byConfirmSignIn.data.orderNum)){
              uni.showToast({title: '订单编号丢失,不能发起请求"',icon: 'none'})
              return;
            }
            uni.showLoading({
              title: '请求中.....',
              mask: true
            })
            _vm.$axios({
              url: 'merchant/merchantActivity/confirmSignIn',
              method: "post",
              data: {
                recodeId: _vm.modal.byConfirmSignIn.data.recodeId,
                orderNum: _vm.modal.byConfirmSignIn.data.orderNum,
              },
              header: {
                "Authorization": _vm.token,
                "Content-type": _vm.contentType,
                "type": "merchantsToken"
              },
            }).then(res => {
              console.log(" merchant/merchantActivity/confirmSignIn :  ", res)
              if(res.code === 0){
                _vm.$refs.popup.success("操作成功");
                _vm.getList();
              }else{
                _vm.$refs.popup.error(res.result);
              }
            }).finally(() => {
              uni.hideLoading();
              _vm.modal.byConfirmSignIn.close();
            })
          },
          open(v) {
            console.log("确认签到对话窗打开 : ",v)
            _vm.modal.byConfirmSignIn.def(v.id, v.orderNum, v.nick, v.activityTitle);
            _vm.modal.byConfirmSignIn.show = true
          },
          close() {
            _vm.modal.byConfirmSignIn.def();
            _vm.modal.byConfirmSignIn.show = false
          }
        }
      },
      /* 样式对象 */
      style: {
        status(v) {
          switch (v) {
            case 0:
              return "<span style='color: #fda7df'>待支付</span>"
            case 1:
              return "<span style='color: #00cec9'>已报名</span>"
            case 2:
              return "<span style='color: #2ed573'>已签到</span>"
            case -1:
              return "<span style='color: #ff4757'>已取消</span>"
          }
        }
      }
    };
  },
  methods: {
    getList() {
      let _t = this;
      let data = {};
      data.pageSize = this.table.pageSize;
      data.pageNo = this.table.pageNo;
      // 如果有排序字段添加排序字段
      if (this.listSortPicker.sortKey !== null) {
        data.sortKey = this.listSortPicker.sortKey;
      }
      if (this.listSortPicker.sort !== null) {
        data.sort = this.listSortPicker.sort;
      }
      // 追加条件筛选对象
      let condition = _t.condition.data;
      if (!service.check.isNull(condition.createTime.value)) {
        data.createTimeScope = JSON.stringify(condition.createTime.value);
      }
      this.$axios({
        url: 'merchant/merchantActivity/registerPeopleList',
        method: "post",
        data: data,
        header: {
          "Authorization": this.token,
          "Content-type": this.contentType,
          "type": "merchantsToken"
        },
      }).then(res => {
        console.log(" merchant/merchantActivity/registerPeopleList :  ", res)
        if (res.code === 0) {
          _t.table.data = res.result.list;
          _t.table.pageNo = res.result.pageNo;
          _t.table.total = res.result.total;
        } else {
          _t.$refs.popup.error("获取报名人员列表失败, 请重试或联系管理员 : " + res.message)
        }
      }).finally(() => {
        _t.table.loading = false
        _t.loading.step();
      })
    },
    /* 获取记录详情 */
    getDetail(id) {
      let _t = this;
      return new Promise((resolve, reject) => {
        this.$axios({
          url: 'merchant/merchantActivity/registerDetail',
          method: "post",
          header: {
            "Authorization": this.token,
            "Content-type": this.contentType,
            "type": "merchantsToken"
          },
          data: {
            id: id
          }
        }).then(res => {
          console.log(" merchant/merchantActivity/registerDetail :  ", res)
          if (res.code === 0) {
            resolve(res)
          } else {
            reject(res)
          }
        })
      })
    }
  },
  onLoad() {
    // 获取图像地址前缀
    this.imgApi = this.$reqConfig.URLIMAGE
    // 获取请求头类型
    this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
    // 获取token
    this.token = uni.getStorageSync("merchantsToken").token
    uni.showLoading({
      title: '加载内容中.....',
      mask: true,
    });
    // 列表
    this.loading.threshold = 1;
  },
  onShow() {
    this.getList();
  }
}
</script>

<style lang="scss">
.table-th-font {
  font-size: 30rpx;
  color: #1c6f5c;
}

.operation-btn {
  margin: 2rpx 4rpx;
  display: inline-block;
}

/*表头样式*/
.uni-table-th {
  background-color: #eff8ff;
  border: 1px #EBEEF5 solid;
}

/*内容样式*/
.uni-table-td {
  border: 1px #EBEEF5 solid;
}

/*表单 label*/
.u-form-item__body__left__content__label.data-v-067e4733 {
  font-size: 30rpx;
  font-weight: bold;
}

#text-flow {
  display: -webkit-box; /*弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*排列方式*/
  -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
  overflow: hidden; /*溢出隐藏*/
}

.tb_td_font {
  font-size: 30rpx;
}
</style>
